import type { VNode } from 'vue'

export interface SelectOption {
  label: string;
  value: string | number;
  disabled?: boolean;
}
// 支持用户自定义渲染label
export type RenderLabelFunc = (option: SelectOption) => VNode
// 支持用户自定义过滤选项
export type CustomFilterFunc = (value: string | number) => SelectOption[]
// 支持远程搜索选项
export type RemoteSearchFilterFunc = (query: string | number) => Promise<SelectOption[]>

export interface SelectProps {
  modelValue: string | number;
  options?: SelectOption[];
  placeholder?: string;
  disabled?: boolean;
  clearable?: boolean;
  renderLabel?: RenderLabelFunc;
  filterable?: boolean;
  filterMethod?: CustomFilterFunc;
  remote?: boolean;
  remoteMethod?: RemoteSearchFilterFunc;
}

export interface SelectState {
  inputValue: string | number;
  selectedOption: SelectOption | null;
  mouseHover: boolean;
  loading: boolean;
  hightlightIndex: number;
}

export interface SelectEmits {
  (e: "change", value: string | number): void;
  (e: "update:modelValue", value: string | number): void;
  (e: "visible-change", show: boolean): void;
  (e: "clear"): void;
}